<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>未出发</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=f5a12a1d">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style type="text/css">
        td.td-value2 {
            padding: 1px !important;
            text-align: left !important;
        }

        .td-value2 input {
            box-shadow: inset 1px 1px 4px #333;
            height: 100% !important;
            padding-left: 4px !important;
        }

        .td-value2 select {
            box-shadow: inset 1px 1px 4px #333;
            height: 100% !important;
            padding-left: 4px !important;
        }


        td.td-title, td select, td .filename, td.td-module {
            color: #333;
        }

        td {
            position: relative;
        }

        .table .td-value span {
            line-height: 22px;
        }



        .progressobj .delfile {
            float: left;
            margin-left: 10px;
        }



        table input {
            border: none;
            width: 100%;
        }

        td.td-value2, td span {
            color: #2a8cec;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .lineOne {
            text-align: left;
        }

        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }

        input[type=text], input[type=tel], input[type=number], select {
            box-sizing: border-box;
            border-width: 0px;
            border-style: none;
            padding-right: 0px !important;
            padding-top: 0px !important;
            padding-bottom: 0px !important;
            margin-left: 0px !important;
            margin-right: 0px !important;
            margin-top: 0px !important;
            margin-bottom: 0px !important;
            padding-left: 6px;
        }

        input[type=text], input[type=tel], input[type=number], select {
            height: 24px;
            width: 100%;
            border: none;
            outline: none;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .lineOne {
            text-align: left;
        }

        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }

        .biTian {
            /*position: absolute;
            left: 30px;
            top: 6px;
            color: red;*/
            position: absolute;
            color: #000;
            margin-left: -15px;
            margin-top: 2px;
        }



        td {
            height: 47.78px;
        }

        .td-value span {
            display: inline-block;
            overflow: hidden;
            padding-left: 0.06rem;
            word-wrap: break-word;
            color: black !important;
        }

        #filePicker_csv div:nth-child(2) {
            width: 100% !important;
            height: 100% !important;
        }

        .title {
            background-color: yellow;
            color: black;
        }


        .jiaobiao3 i {
            display: block;
            width: 10px;
            height: 10px;
            background: url("/dist/img/newLog3.png");
            position: absolute;
            top: 0px;
            right: 0px;
        }



        .moreListData .item span {
            margin-right: 5px;
        }

        .table-detail textarea {
            height: 60px;
            width: 100%;
            border: none;
            outline: none;
            -webkit-appearance: none;
            resize: none;
            line-height: 20px;
            padding-top: 2px !important;
            padding-left: 6px;
        }

        .table-detail td {
            line-height: 24px;
        }


    </style>
</head>
<body>
<section class="content" id="app" v-cloak>
    <iframe id="ifAttach" style="display:none"></iframe>
    <div class="div-td-content-more"><i></i></div>
    <div id="div" style="margin-top: 12px">
        <div style="float: left;width: 100%">
            <div class="center" style="overflow: auto;margin-left: -10px;margin-top:-20px" id="scrollDiv">
                <table class="table table-detail table-bordered text-center" id="oldSample">
                    <tr class="no-print">
                        <td colspan="16" class=" no-print  title">基本信息</td>
                    </tr>
                    <tr style="height:30px;">
                        <th colspan="4" class="td-title" >报修单号</th>
                        <th colspan="4" style="font-size: 12px">{{repairInfo.repair.consultNo}}</th>
                        <th colspan="4"class="td-title">保修时间</th>
                        <th colspan="4">{{repairInfo.repair.createTime}}</th>

                    </tr>
                    <tr style="height:30px;">
                        <td colspan="4" class="td-title">报修类型</td>
                        <td colspan="4">{{repairInfo.repair.repairType}}</td>
                        <td colspan="4"class="td-title">登记人姓名</td>
                        <td colspan="4">{{repairInfo.repair.createUserName}}</td>
                    </tr>
                    <tr style="height:30px;">
                        <td colspan="4"class="td-title">来电人姓名</td>
                        <td colspan="4">{{repairInfo.repair.callerName}}</td>
                        <td colspan="4"class="td-title">来电人电话</td>
                        <td colspan="4">{{repairInfo.repair.callerTel}}</td>
                    </tr>
                    <tr style="height:30px;">
                        <td colspan="4"class="td-title">来电人类型</td>
                        <td colspan="4">{{repairInfo.repair.repairType}}</td>
                        <td colspan="4"class="td-title">客户姓名</td>
                        <td colspan="4">{{repairInfo.repair.customerName}}</td>
                    </tr>
                    <tr style="height:30px;">
                        <td  colspan="4"class="td-title">客户电话</td>
                        <td  colspan="4">{{repairInfo.repair.customerTel}}</td>
                        <td  colspan="4"class="td-title">预约时间</td>
                        <td  colspan="4">{{repairInfo.repair.createUserName}}</td>
                    </tr>
                    <tr class="no-print">
                        <td colspan="16" class=" no-print  title">设备信息</td>
                    </tr>
                    <tr style="height:30px;">
                        <td  colspan="4"class="td-title">设备品牌</td>
                        <td  colspan="4">{{repairInfo.repair.createUserName}}</td>
                        <td  colspan="4"class="td-title">设备类型</td>
                        <td  colspan="4">{{repairInfo.repair.createUserName}}</td>
                    </tr>
                    <tr style="height:30px;">
                        <td  colspan="4"class="td-title">设备型号</td>
                        <td  colspan="4">{{repairInfo.repair.createUserName}}</td>
                        <td  colspan="4"class="td-title">设备序列号</td>
                        <td  colspan="4">{{repairInfo.repair.createUserName}}</td>
                    </tr>
                    <tr style="height:30px;">
                        <td  colspan="4"class="td-title">工作小时</td>
                        <td  colspan="4">{{repairInfo.repair.createUserName}}</td>
                        <td  colspan="4"class="td-title">质保状态</td>
                        <td  colspan="4">{{repairInfo.repair.createUserName}}</td>
                    </tr>
                    <tr style="height:30px;">
                        <td  colspan="4"class="td-title">设备是否停机</td>
                        <td  colspan="4">{{repairInfo.repair.createUserName}}</td>
                        <td  colspan="4"class="td-title"></td>
                        <td  colspan="4">{{repairInfo.repair.createUserName}}</td>
                    </tr>
                    <tr style="height:30px;">
                        <td  colspan="4"class="td-title">工地位置</td>
                        <td  colspan="12">{{repairInfo.repair.createUserName}}</td>
                    </tr>
                    <tr style="height:30px;">
                        <td  colspan="4"class="td-title">保修内容登记</td>
                        <td  colspan="12">{{repairInfo.repair.createUserName}}</td>
                    </tr>
                    <tr style="height:30px;">
                        <td  colspan="4"class="td-title" style="font-size: 12px">现场联系人身份</td>
                        <td  colspan="4">{{repairInfo.repair.liveLinkmanType}}</td>
                        <td  colspan="4"class="td-title"style="font-size: 12px">现场联系人姓名</td>
                        <td  colspan="4">{{repairInfo.repair.liveLinkmanName}}</td>
                    </tr>
                    <tr style="height:30px;">
                        <td  colspan="4"class="td-title" style="font-size: 12px">现场联系人电话</td>
                        <td  colspan="4">{{repairInfo.repair.liveLinkmanTel}}</td>
                        <td  colspan="4"class="td-title"></td>
                        <td  colspan="4"></td>
                    </tr>
                    <tr style="height:30px;">
                        <td  colspan="16">{{repairInfo.repair.createUserName}}</td>

                    </tr>
                    <tr class="no-print">
                        <td colspan="16" class=" no-print  title">电话预约</td>
                    </tr>
                    <tr class="no-print">
                        <td colspan="16" class=" no-print  title">撤单</td>
                    </tr>
                    <tr class="no-print">
                        <td colspan="16" class=" no-print  title">立即出发</td>
                    </tr>

                </table>
            </div>
        </div>
    </div>
</section>
<!--插件JS-->
<!--框架已定义 JS-->
<!--oa自定义  JS-->

<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script>window.jQuery || document.write('<script src="/dist/plugins/jQuery/jquery-2.2.3.min.js"><\/script>', '<script src="/dist/plugins/bootstrap/js/bootstrap.min.js"><\/script>', '<script src="/dist/plugins/vue/vue.min.js"><\/script>')</script>
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/js/oa.js?t=63aed32f"></script>
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<!--ztree组件所需js-->
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="/dist/js/pages/apply/money/class.js"></script>
<script type="text/javascript" src="/dist/js/pages/system/systemService.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/commonService.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/changeMoneyToChinese.js"></script>
<script type="text/javascript" src="/dist/plugins/print/print.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/js/pages/wreport/Template.js?t=42e28def"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="https://file.ggxqce.com/web/axios.min.js"></script>
<script src="/dist/js/newOaApp.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            itemsBran: [],
            itemsType: [],
            itemsMod: [],
            provinceName: '',
            cityName: '',
            countyName: '',
            //0查看，1新增，2修改
            pageType: 0,
            repairInfo: {
                device: {
                    id: '',
                    mainId: "",
                    deviceBrand: "",
                    deviceBrandId: "",
                    deviceType: "",
                    deviceTypeId: "",
                    deviceModel: "",
                    deviceModelId: "",
                    sequence: "",
                    dateOfDevice: "",
                    workHours: "",
                    warrantyStatus: "",
                    siteLocation: "",
                    halt: -1,
                    siteLocationDetail: "",
                },
                repair: {
                    id: "",
                    mainId: "",
                    consultNo: "",
                    createTime: "",
                    internalOfRepair: "",
                    createUserName: getCurrentUser().name,
                    createUserId: getCurrentUser().id,
                    registerContent: "",
                    remark: "",
                    liveLinkmanType: "",
                    liveLinkmanName: "",
                    liveLinkmanTel: "",
                    customerName: "",
                    customerId: "",
                    customerTel: "",
                    callerName: "",
                    callerId: "",
                    callerTel: "",
                    repairType: "",
                    serialNo: "",
                    repariName: "",
                    repairSequence: "",
                    repairStatus: "",
                    halt: "",
                    appointDate: "",
                    appointTime: "",
                    serverStationId: "",
                    serverStation: "",
                    acceptId: "",
                    acceptTel: "",
                }
            },
            item: {
                status: [],
                callerType: [],
                repairTyppe: [],
                deviceBrand: [],
                deviceType: [],
                deviceModel: [],
                warrantyStatus: [],
                serveLinkMan: [],
                servceStation: [],
                acceptName: [],
                deviceInfo: {},
            },
            customerDeviceList: [],

        },
        methods: {

            setPullRefresh: function (isOpen) {
                var param = {
                    pullRefresh: isOpen, //是否开启原生下拉刷新
                }
                JSBridge.call(UI, 'setPullRefresh', param)
            },
            showMore: function (event) {
                var el = event
                var text = el.innerText;
                if (text != "") {
                    text = "<i></i>" + text;
                    var mydiv = document.getElementById("oa-more");
                    if (!mydiv) {
                        var div = document.createElement("div");
                        div.setAttribute("id", "oa-more");
                        document.body.appendChild(div);
                        mydiv = document.getElementById("oa-more");
                    }
                    if (mydiv.offsetParent === null) {
                        mydiv.style.display = 'block';
                        mydiv.innerHTML = text;
                        mydiv.style.width = el.offsetWidth + 'px';
                        mydiv.style.left = el.getBoundingClientRect().left + 'px';
                        console.log(el.height)
                        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || 0;
                        mydiv.style.top = ( scrollTop + el.getBoundingClientRect().top + el.offsetHeight + "px")
                    } else {
                        mydiv.style.display = 'none';
                    }

                } else {
                    var mydiv = document.getElementById("oa-more");
                    mydiv.style.display = 'none';
                }

                document.onclick = function () {
                    var mydiv = document.getElementById("oa-more");
                    if (mydiv) {
                        mydiv.style.display = "none";
                    }
                };
            },
            fjStyle: function (fjName) {
                //传入附件名称 返回对应附件类型的样式用于展示
                if (fjName) {
                    var type = fjName.substring(fjName.lastIndexOf('.') + 1);
                    return 'img fj-' + type
                }
                return 'img'
            },
            getList: function (repairId) {
                var that = this;

                if(that.isBottomLine){
                    /* debugger*/
                    /*JSBridge.call(UI, 'showToast', "当前为最后一页")*/
                    return;
                }
                if (that.isLoad) {
                    return;
                } else {
                    that.isLoad = true;
                }
                var url = '/serveRepair/getServeRepairObjectById.json';

                that.showLoading();
                axios({
                    url: url,
                    method: 'post',
                    data: { "repairId":"20190423085241A3A485948EADD53172"},

                }).then(function (response) {
                    that.f1=1;
                    console.log(response);
                    repair=response.records;
                    that.isLoad = false;
                    that.hideLoading();
                }).catch(function (error) {
                    that.isLoad = false;
                    that.hideLoading();
                })

            },
            showLoading: function () {
                var that = this
                var param = {
                    cancelable: false
                }
                // JSBridge.call(UI, 'showLoading', param)

                setTimeout(function () {
                    that.hideLoading()
                }, 3000)
            },
            hideLoading: function () {
                JSBridge.call(UI, 'hideLoading')
            },

        },
        mounted: function () {
            var that = this;
            /*     that.getList(false);*/
            /* that.searchParams.userId*/
            axios.post("/serveRepair/getServeRepairObjectById.json", {"repairId":"20190423085241A3A485948EADD53172"})
                .then(function (r) {
                    that.repairInfo.repair = r;
                    console.log(that.repair)
                })
            that. setPullRefresh(true);
        }
    });

    window.onscroll = function () {
        var isTop = true
        /*清除，提示框信息*/
        var mydiv = document.getElementById("oa-more");
        if(mydiv!=null){
            mydiv.style.display = 'none';
        }
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        //滚动条到底部的条件
        var sum = Math.ceil(scrollTop + windowHeight)
        if (sum >= scrollHeight) {
            //写后台加载数据的函数
            app.getList(true);
            console.log("滚动到底部了");
            if(app.isBottomLine){
                var param = {
                    title: "没有更多数据了..."
                }
                JSBridge.call(UI, 'showToast',param );
            }

        }
        //为了保证兼容性，这里取两个值，哪个有值取哪一个,scrollTop就是触发滚轮事件时滚轮的高度
        if (scrollTop === 0) {
            isTop = true
            setScrollTop(true) //到达顶部
        } else if (scrollTop > 0 && isTop) {
            isTop = false
            setScrollTop(false) //非顶部
        }
    }
</script>

<script>
    function setScrollTop (isScrollTop) {
        var param = {
            isScrollTop: isScrollTop
        }
        JSBridge.call(UI, 'setScrollTop', param)
    }
</script>

</body>
</html>